<!DOCTYPE html>
<html lang="en">
    <title>按钮</title>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>

		<!-- 引入样式文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css"> -->
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script> -->
		<link rel="stylesheet" href="../css/index.css">
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vant.min.js"></script>

	</head>

	<body>
		<div id="app">
			<div>
				<div style="color: #C8C9CC;30px;line-height: 30px;">基础用法</div>
				<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" ></van-image>
				
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">填充模式</div>
				<van-image
				  width="10rem"
				  height="10rem"
				  fit="contain"
				  src="https://img.yzcdn.cn/vant/cat.jpeg"
				></van-image>
				
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">圆形图片</div>
				<van-image
				  round
				  width="10rem"
				  height="10rem"
				  src="https://img.yzcdn.cn/vant/cat.jpeg"
				></van-image>
				
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">图片懒加载</div>
				<van-image
				  width="100"
				  height="100"
				  lazy-load
				  src="https://img.yzcdn.cn/vant/cat.jpeg"
				></van-image>
				
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">加载中提示</div>
				<van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
				  <template v-slot:loading>
				    <van-loading type="spinner" size="20" />
				  </template>
				</van-image>
				
				<div style="color: #C8C9CC;height: 30px;line-height: 30px;">加载失败提示</div>
				<van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
				  <template v-slot:error>加载失败</template>
				</van-image>
				
			</div>
		</div>
		<script>
			// 在 #app 标签下渲染一个按钮组件
			new Vue({
				el: '#app',
				
				data: {
				
				},
				
				methods: {
				
				},
				
				created() {
				
				},
				//template: '<van-button type="danger">默认按钮</van-button>'
				//template: `<van-cell title="单元格" value="内容" size="large" />`
			});
			// 调用函数组件，弹出一个 Toast
			//vant.Toast('提示');
		</script>
	</body>

</html>
